<template>
    <div class="bankadd">
        <van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '添加银行卡' : ''" @click-left="handleBack" />
        <div class="inner">
            <van-form ref="pushFormEle" label-width="100">
                <van-cell-group inset>

                    <van-field name="yinhang" required v-model="pushForm.yinhang" label="所属银行" placeholder="请输入"
                        :rules="[{ required: true, message: '请填写' }]" />

                    <van-field name="kaihuhang" required v-model="pushForm.kaihuhang" label="开户行" placeholder="请输入"
                        :rules="[{ required: true, message: '请填写' }]" />

                    <van-field name="bank" required v-model="pushForm.bank" type="number" placeholder="请输入" label="银行卡号"
                        :rules="[{ required: true, message: '请填写' }]" />

                    <van-field name="name" required v-model="pushForm.name" label="姓名" placeholder="请输入"
                        :rules="[{ required: true, message: '请填写' }]" />

                    <van-field name="phone" required v-model="pushForm.phone" type="number" placeholder="请输入"
                        label="预留手机号" :rules="[{ required: true, message: '请填写' }]" />

                </van-cell-group>
                <div style="margin: 16px">
                    <van-button round block type="primary" @click="submit">
                        提交
                    </van-button>
                </div>
            </van-form>

        </div>

    </div>

</template>

<script setup>
import { isWeixin, getCookie } from "@/utils/index";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { showLoadingToast, showSuccessToast, showFailToast, showConfirmDialog, showToast } from 'vant';
import { userbankaddApi } from '@/api/bank.ts'
const router = useRouter();
const pushFormEle = ref()
const pushForm = reactive({
    name: "",
    phone: "",
    yinhang: "",
    kaihuhang: "",
    name: "",
    bank: "",


});
const submit = () => {
    pushFormEle.value.validate().then(() => {
        let toast = showLoadingToast({
            message: '提交中...',
            loadingType: 'spinner',
            forbidClick: true,
            duration: 0
        });
        let req = {
            uid: getCookie('token') ? Number(getCookie('token')) : '',
            ...pushForm
        }

        userbankaddApi(req).then((res) => {
            toast.close()
            if (res.code == 0) {
                showSuccessToast({
                    message: '添加成功',
                    duration: 1500,
                    forbidClick: true,
                    onClose: () => {
                        handleBack()
                    }
                })
            } else {
                showFailToast(res.msg)
            }
        })
    })
}
const handleBack = () => {
    if (history.state?.back) {
        router.back();
    } else {
        router.push("/user");
    }
};
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
